<template>
<div class="col-md-12">
  <topo-binds-detail></topo-binds-detail>
  <my-navbar>
    <template slot="right"> 
      <button class="btn btn-default" @click.prevent="onShowDetail">
        <span class="glyphicon glyphicon-edit"></span> {{$t('navbar.topoBindsEdit')}}
      </button>       
      <button class="btn btn-default" @click.prevent="onRefresh">
        <span class="glyphicon glyphicon-refresh"></span> {{$t('common.refresh')}}
      </button>        
    </template> 
  </my-navbar>
  <div class="col-md-12">
    <my-table :cfg="cfg" :list="topoSummary.list" :loading="topoSummary.loading"></my-table>
  </div>  
</div>
</template>

<script>
import _ from 'lodash'
import ebus from 'libs/ebus.js'
import toast from 'libs/toast.js'
import msgbox from 'libs/msgbox.js'
import locales from '../locales/topoDevList.js'
import {List} from '../configs/topoDevList.js'
import TopoBindsDetail from './TopoBindsDetail.vue'
import * as actions from 'share/server/vuex/actions/devmng.js'

export default {
  locales,
  components: {
    'topo-binds-detail': TopoBindsDetail,
  },
  vuex: {
    getters: {
      topoSummary: (state) => state.devmng.topoSummary
    },
    actions
  },
  data () {
    return {
      cfg: {
        checkable: false,
        showHead: true,
        columns: new List(this)   
      }
    }
  },
  methods: {
    onRefresh () {
      ebus.emit('load-topo-summary')
    },
    onShowDetail () {
      ebus.emit('show-topo-binds-detail')
    }
  }
}
</script>

<style>
</style>